<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>

<tiles:useAttribute name="topSegmentid"/>

<c:set var="topLevels" value="${navSegments.children}"></c:set>
<c:set var="topLevelsSize" value="${fn:length(topLevels)}"></c:set>
<div id="navSegmentTabs" class="head1_nav">
    <div class="head1_navdiv fl" style="width:850px">
    	<a href="<c:url value='/home.do'/>"/>首页</a>
    	<c:forEach var="cascadeC" items="${topLevels}" varStatus="segmentStatus">
    		<c:set var="segment" value="${cascadeC.current}"></c:set>
    		<a id="navSegmentTabs-${segment.segmentid}" class="" href="<c:url value='/klg/index.do?topSegmentid=${segment.segmentid}'/>"><c:out value='${segment.title}'/></a>
    	</c:forEach>
   		<a href="<c:url value='/home.do'/>"/>食谱</a>
   		<a href="<c:url value='/bbs/index.do'/>"/>论坛</a>
    </div>
</div>
<div id="navSegmentTabsContent" style="padding:0 0 20px 0;">
	<c:forEach var="cascadeC" items="${topLevels}" varStatus="segmentPartStatus">
		<c:set var="children" value="${cascadeC.children}"></c:set>
		<c:set var="parent" value="${cascadeC.current}"></c:set>
		<p id="navSegmentTabs-content-${parent.segmentid}" class="head_sunav" style="display:none">
			<c:forEach var="child" items="${children}" varStatus="childStatus">
				<c:set var="segment" value="${child.current}"></c:set>
				<a href="<c:url value='/klg/list.do?segid=${segment.segmentid}'/>"><c:out value="${segment.title}"/></a>
			</c:forEach>
		</p>
	</c:forEach>
</div>
<p class="clear"></p>
<script>
$.each($("#navSegmentTabs a"),function(i, n){
	var id = $(n).attr("id");
	if(id){
		n.onmouseover=function(){
			this.timer=window.setTimeout(function(){
				$("#navSegmentTabs a").removeClass("head1_navdiva").addClass("");
				$("#navSegmentTabsContent p").css("display","none");
				n.className="head1_navdiva";
				var temps = id.split("-");
				var suffix = temps[1];
				$("#navSegmentTabs-content-"+suffix).css("display","block");
		//	$("#navSegmentTabs li").removeClass("tabs1HeaderCurrent").addClass("tabs1Header");
		//	$("#navSegmentTabs .tabs1Content").css("display","none").eq(i).css("display","block");
		//	n.className="tabs1HeaderCurrent";
			},100)
		};
	}
	n.onmouseout=function(){window.clearTimeout(this.timer);}
});
var topSegmentid = '<c:out value="${topSegmentid}"/>';
if(topSegmentid){
	$("#navSegmentTabs-"+topSegmentid).mouseover(); 
}else{
	$("#navSegmentTabs a:first").mouseover(); 
}
</script>